@charset "UTF-8";

@import '~scss/themes/index.scss';
@import '~scss/helpers/_1px.scss';

$line--background: $base--border-color;

.ui-1px,
.ui-1px-t,
.ui-1px-b,
.ui-1px-tb,
.ui-1px-l,
.ui-1px-r {
  position: relative;
}

.ui-1px {
  &:before {
    @include line($line--background);
  }
}

.ui-1px-t {
  &:before {
    @include line-top($line--background);
  }
}

.ui-1px-b {
  &:after {
    @include line-bottom($line--background);
  }
}

.ui-1px-tb {
  &:before {
    @include line-top($line--background);
  }
  &:after {
    @include line-bottom($line--background);
  }
}

.ui-1px-l {
  &:before {
    @include line-left($line--background);
  }
}

.ui-1px-r {
  &:after {
    @include line-right($line--background);
  }
}

.ui-border {
  &.colors {
    position: relative;
    padding-top: 2px;
  }

  &.colors-t {
    &:before {
      position: absolute;
      right: 0;
      top: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: auto;
      background-size: 80px;
      content: '';
    }
  }
  &.colors-b {
    &:before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: auto;
      background-size: 80px;
      content: '';
    }
  }
}
